<template>
    <div class="exam-container">
      <div class="exam-header">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span><el-icon><User /></el-icon> 考生信息</span>
                </div>
              </template>
              <div class="student-info">
                <p><span class="label">姓名：</span>{{ studentInfo.name }}</p>
                <p><span class="label">考号：</span>{{ studentInfo.number }}</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span><el-icon><Document /></el-icon> 试卷信息</span>
                </div>
              </template>
              <div class="exam-info">
                <p class="exam-name">{{ examInfo.name }}</p>
                <p><span class="label">总分：</span><span class="score">{{ examInfo.totalScore }}</span> 分</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :class="{ 'warning': remainingTime < 300 }">
              <template #header>
                <div class="card-header">
                  <span><el-icon><Timer /></el-icon> 剩余时间</span>
                </div>
              </template>
              <div class="timer">
                {{ formatTime }}
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
  
      <div class="exam-main">
        <div class="question-nav">
          <el-card shadow="hover" class="calendar-style">
            <template #header>
              <div class="card-header">
                <span><el-icon><Grid /></el-icon> 题目导航</span>
                <span class="progress-text">已完成 {{ completedCount }}/{{ totalQuestions }}</span>
              </div>
            </template>
            <div class="question-grid">
              <el-button
                v-for="i in totalQuestions"
                :key="i"
                :type="getQuestionButtonType(i)"
                size="large"
                @click="changeQuestion(i)"
                class="question-btn"
              >
                {{i}}
              </el-button>
            </div>
          </el-card>
        </div>
  
        <div class="question-content">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="question-header">
                  第 {{ currentQuestion }} 题
                  <span class="question-score">{{ currentQuestionData.score }}分</span>
                </span>
                <div class="question-actions">
                  <el-button type="primary" @click="prevQuestion" :disabled="currentQuestion === 1">
                    <el-icon><ArrowLeft /></el-icon> 上一题
                  </el-button>
                  <el-button type="primary" @click="nextQuestion" :disabled="currentQuestion === totalQuestions">
                    下一题 <el-icon><ArrowRight /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            <div class="question-detail">
              <p class="question-title">{{ currentQuestionData.title }}</p>
              <el-radio-group v-model="answers[currentQuestion - 1]" class="options-list">
                <el-radio 
                  v-for="(option, index) in currentQuestionData.options" 
                  :key="index" 
                  :value="index"
                  class="option-item"
                  border
                >
                  {{ option }}
                </el-radio>
              </el-radio-group>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  // 考生信息
  const studentInfo = ref({
    name: '张三',
    number: '2024001'
  })
  
  // 考试信息
  const examInfo = ref({
    name: '2024年度测试卷',
    totalScore: 100,
    duration: 120 // 考试时长（分钟）
  })
  
  // 剩余时间
  const remainingTime = ref(examInfo.value.duration * 60)
  const formatTime = computed(() => {
    const hours = Math.floor(remainingTime.value / 3600)
    const minutes = Math.floor((remainingTime.value % 3600) / 60)
    const seconds = remainingTime.value % 60
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
  })
  
  // 题目相关
  const totalQuestions = ref(20)
  const currentQuestion = ref(1)
  const answers = ref(new Array(totalQuestions.value).fill(null))
  
  const currentQuestionData = ref({
    title: '这是一道示例题目，下列选项中正确的是？',
    options: [
      'A. 选项一',
      'B. 选项二',
      'C. 选项三',
      'D. 选项四'
    ],
    score: 5
  })
  
  // 计时器
  setInterval(() => {
    if (remainingTime.value > 0) {
      remainingTime.value--
    }
  }, 1000)
  
  // 获取题目按钮类型
  const getQuestionButtonType = (index) => {
    if (index === currentQuestion.value) return 'primary'
    return answers.value[index - 1] !== null ? 'success' : ''
  }
  
  // 切换题目
  const changeQuestion = (index) => {
    currentQuestion.value = index
  }
  // 添加新的计算属性
  const completedCount = computed(() => {
  return answers.value.filter(answer => answer !== null).length
})

// 添加导航方法
const prevQuestion = () => {
  if (currentQuestion.value > 1) {
    currentQuestion.value--
  }
}

const nextQuestion = () => {
  if (currentQuestion.value < totalQuestions.value) {
    currentQuestion.value++
  }
}
  </script>
  
  <style scoped>
  .exam-container {
    padding: 20px;
    min-height: 100vh;
    background-color: #f5f7fa;
  }
  
  .exam-header {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
  }
  
  .card-header .el-icon {
    margin-right: 6px;
    vertical-align: middle;
  }
  
  .student-info p, .exam-info p {
    margin: 8px 0;
    font-size: 15px;
  }
  
  .label {
    color: #606266;
    margin-right: 8px;
  }
  
  .exam-name {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
  }
  
  .score {
    font-size: 18px;
    font-weight: bold;
    color: #409EFF;
  }
  
  .timer {
    font-size: 32px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
    font-family: 'Monaco', monospace;
  }
  
  .warning .timer {
    color: #F56C6C;
    animation: blink 1s infinite;
  }
  
  @keyframes blink {
    50% {
      opacity: 0.5;
    }
  }
  
  .exam-main {
    display: flex;
    gap: 20px;
  }
  
  .question-nav {
    width: 480px;
  }
  
  .question-content {
    flex: 1;
  }
  
  .question-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 10px;
  }
  
  .question-btn {
    transition: all 0.3s;
  }
  
  .question-btn:hover {
    transform: translateY(-2px);
  }
  
  .question-title {
    font-size: 18px;
    line-height: 1.6;
    color: #303133;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }
  
  .options-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }
  
  .option-item {
    margin-left: 0;
    width: 100%;
    padding: 15px 20px;
    border-radius: 8px;
  }
  
  .question-score {
    background: #f56c6c;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 14px;
    margin-left: 10px;
  }
  
  .progress-text {
    font-size: 14px;
    color: #67c23a;
  }
  
  .question-header {
    font-size: 18px;
    font-weight: bold;
  }
  
  .question-actions {
    display: flex;
    gap: 10px;
  }
  
  :deep(.el-radio__label) {
    white-space: normal;
    line-height: 1.5;
  }
  
  :deep(.el-radio.is-bordered) {
    margin-left: 0;
    margin-right: 0;
  }
  
  :deep(.el-radio.is-bordered.is-checked) {
    border-color: #409EFF;
    background-color: #ecf5ff;
  }
  
  :deep(.el-card) {
    transition: all 0.3s;
  }
  
  :deep(.el-card:hover) {
    transform: translateY(-2px);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .exam-header .el-card {
  height: 160px; /* 设置统一的卡片高度 */
}

.exam-header .el-card__body {
  height: calc(100% - 55px); /* 减去header的高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  font-family: 'Monaco', monospace;
  margin: 0; /* 移除可能的外边距 */
}

.student-info, .exam-info {
  width: 100%;
}
.el-button+.el-button {
     margin-left: 0px; 
}
  </style>